<template>
	<view class="main">
		<view class="top">
			<view class="top-t">
				<span class="top-num">123</span>
				<span class="top-unit">Pa</span>
			</view>
			<view class="top-tip">当前压力数值</view>
		</view>
		<view class="content">
			<view class="select-time" @click="openShowPicker">
				<image class="time-icon" src="../../static/icon/me-def.png" mode=""></image>
				<span class="time-name">筛选</span>
			</view>
			<view class="echart" id="echartId"></view>
		</view>
		<hbxw-time-range-picker :value="values2" :visible="showPicker" :isShowType="false" delimiter="point"
			:isShowSecond="false" @change="pickerChange" @cancel="pickerCancel" @sure="pickerSure" />
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				showPicker: false,
				values2: '',
				valuesStr: '',
			}
		},
		onLoad() {
			
		},
		onReady() {
			this.getEchart();	
		},
		methods: {
			pickerConfirm(val){
				this.valuesStr = val.valuesStr1;  // '14:03-14:05'
				console.log('pickerSure', val)
			},
			openShowPicker(){
				this.showPicker = true;
			},
			getEchart(){
				let echartId = document.getElementById('echartId')
				let  echart = echarts.init(echartId);
				let option = {
					title: {
					  text: '压力曲线图'
					},
					tooltip: {
						trigger: 'axis',
						show: true,
					},
					xAxis: {
					  data: ["15:00","15:10","15:20","15:30","15:40","15:50"]
					},
					yAxis: {},
					series: [{
					  name: '销量',
					  type: 'line',
					  data: [5, 20, 36, 10, 10, 20]
					}]
				}
				echart.setOption(option);
			},
		}
	}
</script>

<style scoped>
	.top{
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(0deg, #FEFEFE, #EDF5F8);
	}
	.top-t{
		display: flex;
		align-items: flex-end;
		color: #027BC4;
	}
	.top-num{
		height: 148rpx;
		line-height: 148rpx;
		font-weight: bold;
		font-size: 175rpx;
	}
	.top-unit{
		margin-left: 20rpx;
		font-size: 35rpx;
	}
	.top-tip{
		margin-top: 30rpx;
		font-size: 25rpx;
	}
	.content{
		position: relative;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
	.echart{
		box-sizing: border-box;
		padding: 42rpx 20rpx 0;
		width: 100%;
		height: 638rpx;
		background-color: #fff;
	}
	.select-time{
		position: absolute;
		top: 30rpx;
		right: 40rpx;
		width: 146rpx;
		height: 49rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 25rpx;
		border: 1px solid #027BC4;
		z-index: 111;
	}
	.time-icon{
		width: 30rpx;
		height: 30rpx;
	}
	.time-name{
		margin-left: 17rpx;
		font-size: 24rpx;
		color: #027BC4;
	}
</style>